谈谈CSS实现水平垂直居中布局的方法

来源:网络整理作者: 发布时间:2020-12-19 08:46

最近面试的时候，面试官问到了CSS水平垂直居中布局的方式，对于刚入前端没多久的我，无疑是一脸懵逼，闲了赶紧...

不需要子元素宽高固定，但是依赖于translate2d的兼容性

一、 absolute 和 margin auto（常用）

这些css样式在后续介绍中默认带上，不再赘述！

此时可以利用margin的负值来实现效果，当外边距为负值时，元素向相反方向定位，这样我们将子元素的外边距设置为子元素的宽高的一半就可以实现了。（PS：缺点就是必须得到子元素的宽高）

flex是现代的布局方案仅仅需要几行代码即可实现居中效果

<body> <div class="div1"> <div class="box">水平垂直居中，不需要子元素固定宽高</div> </div> </body>

公共css如下

.div1{ display: flex; justify-content: center; align-items: center; }

五、line-height

html修改为：

相关教程推荐：CSS视频教程、CSS3视频教程

以上就是谈谈CSS实现水平垂直居中布局的方法的详细内容，更多请关注聚合云库其它相关文章！

.div1{ position: relative; } .box{ position: absolute; top:0; left: 0; right: 0; bottom: 0; margin: auto; }

二、absolute 和margin（负值）

.div1{ position: relative; } .box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

七、css-table

谈谈CSS实现水平垂直居中布局的方法

.div1{ line-height: 300px; text-align: center; font-size: 0px; } .box{ font-size: 10px; display: inline-block; vertical-align: middle; line-height:initial; /* 修正文字 */ text-align: left; }

六、absolute 和 transform

.div1{ position: relative; } .box{ top: 50%; left: 50%; position: absolute; margin-top: -50px; margin-left: -50px; }

三、absolute 和 calc

利用行内元素居中属性也可以做到水平垂直居中。把box设置为行内元素，通过text-align就可以实现水平居中vertical-align 也可以在垂直方向做到居中（PS：这种方法需要在子元素中将文字显示重置为想要的效果）

.div1{ position: relative; } .box{ position: absolute; top: calc(50% - 50px ); /* 减号前后没有空格，该样式不生效*/ left: calc(50% - 50px ); }

当我在写这段代码的时候，发现一个有趣的事情，calc（50%-50px）如果减号前后没有空格的话，样式就不会生效，写上空格的话，就会正常生效了，具体原因我也不太清楚emmmmm

同样居中元素的宽高必须固定，并且需要得知子元素的宽高

首先先说明一下html和一些基础css样式，下面就不再赘述！
.div1{ display:table-cell; text-align: center; vertical-align: middle; } .box{ display:inline-block; }

以上就是我总结的一些居中布局的方法了，还有什么其他的欢迎补充！

个人感觉： 我比较喜欢 absolute +margin auto 、flex、absolute 和 transform，移动端最好用flex吧，pc端我喜欢absolute +margin auto

top的百分比是基于元素左上角减去宽度的一半即可（PS：依赖calc的兼容性）

<body> <div class="div1"> <div class="box size">垂直水平居中</div> </div> </body>

公共css代码如下

.div1{ width: 300px; height: 300px; border: 1px solid red; } .box{ background: #00FFFF; }

四、flex（常用）

同样需要子元素的宽高固定，并知道宽高，css3具有计算属性。

简单说一下原理，利用了绝对定位，绝对定位的百分比是相对于父元素的宽高，所以我们可以根据这个原理将元素居中显示。但是要注意：绝对定位是基于子元素的左上角来说的，但是要想让子元素居中显示，就要解决这个问题。

css新增的table属性，可以把普通元素改变为table元素的显示效果，也可以实现水平居中

最近面试的时候，面试官问到了CSS水平垂直居中布局的方式，对于刚入前端没多久的我，无疑是一脸懵逼，闲了赶紧查阅资料分析一波，给各位分享一下，避免落坑。

html

下面的方法将不需要知晓子元素的宽高即可设置

这种方式通过设置各个方向的距离都是0，此时再将margin设为auto，就可以在各个方向上居中了

用react的ReactCSSTransitionGroup插件	当你自己回头来看你写的这些
我们直接看代码： !DOCTYPE htm	那么使用 CSS3 新增的选择器无
微软IE9平台预览版完整支持H	IE9正式版无论从性能提升还是
CSS3东西最新资讯	各路人马对它的热情都极为高
中联重科CSS3混凝土喷射机器手	CSS3与页面机关进修总结（二）
四、id选择器（#ID） ID选择器	谈谈一些有趣的CSS题目（十）
在全局:root{ }伪类中定义了一个	CSS3与页面机关进修总结（七）
而不是元素本身	在使用有厂商前缀的样式时

CSS/HTML

谈谈CSS实现水平垂直居中布局的方法

相关文章

热门TAG

最新文章

热门文章